<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>我的订单</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <style>.container{max-width:1000px;margin:0 auto;padding:16px}</style>
</head>
<body>
<div id="app" class="container">
    <el-page-header @back="go('/')" content="我的订单"></el-page-header>
    <el-table :data="orders" style="width:100%;margin-top:12px;">
        <el-table-column prop="orderNo" label="订单号"></el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="220"></el-table-column>
        <el-table-column label="操作" width="160">
            <template #default="{row}">
                <el-button size="small" @click="go('/orders/detail?orderNo=' + row.orderNo)">查看</el-button>
            </template>
        </el-table-column>
    </el-table>
</div>
<script>
const { createApp, ref, onMounted } = Vue
createApp({
    setup(){
        const orders = ref([])
        const go = (p)=>{ location.href = p }
        onMounted(async ()=>{
            const res = await fetch('/api/orders')
            const json = await res.json()
            orders.value = json.data || []
        })
        return { orders, go }
    }
}).use(ElementPlus).mount('#app')
</script>
</body>
</html>



